<template>
  <div class="all">
    <div class="a">
      <Back :title="'法币交易'"></Back>
      <el-tabs type="border-card" class="custom-tabs">
        <el-tab-pane label="买入">
          <div class="body">
        <div class="ustd">
          <p tabindex="1" v-for="(item, index) in currency" @click="id=item.id">{{ item.englishName }}<br>{{ item.name }}</p>
        </div>
        <div class="buy">
          <p class="p6">购买金额</p>
          <input v-model="money" @blur="getNumbers" placeholder=" ">
          <!-- <p class="p7" style="transform: scale(0.80)">买入估计 {{ rate }} CNY/USDT</p> -->
          <p class="p6">获得数量</p>
          <input type="text" :value="qty" readonly placeholder=" ">
          <!-- <p class="p7" style="transform: scale(0.80)">当前余额 0.21 USDT</p> -->
          <button :class="{ 'newButton': isButtonNew }" @click="buyCurrency" :disabled="!isButtonNew">直接买入</button>
        </div>
        <p class="p7" style="transform: scale(0.80)">*交易0手续费</p>
        <p class="p7" style="transform: scale(0.80)">*如订单产生纠纷，请立即提交申请进行处理。</p>
      </div>
        </el-tab-pane>
    <el-tab-pane label="卖出">
          <div class="body">
        <div class="ustd">
          <p tabindex="1" v-for="(item, index) in currency">{{ item.englishName }}<br>{{ item.name }}</p>
        </div>
        <div class="buy">
          <p class="p6">卖出金额</p>
          <input v-model="money" @blur="getNumbers" placeholder=" ">
          <!-- <p class="p7" style="transform: scale(0.80)">买入估计 {{ rate }} CNY/USDT</p> -->
          <p class="p6">获得数量</p>
          <input type="text" :value="qty" readonly placeholder=" ">
          <!-- <p class="p7" style="transform: scale(0.80)">当前余额 0.21 USDT</p> -->
          <button :class="{ 'newButton': isButtonNew }" @click="sellCurrency" :disabled="!isButtonNew">直接卖出</button>
        </div>
        <p class="p7" style="transform: scale(0.80)">*交易0手续费</p>
        <p class="p7" style="transform: scale(0.80)">*如订单产生纠纷，请立即提交申请进行处理。</p>
      </div>
    </el-tab-pane>
      </el-tabs>
      <!--<p class="p4">买入</p>
      <p class="p5">卖出</p>-->
      
    </div>
  </div>
</template>

<script>
import Back from "../../components/BackNavbar.vue";
import { getNumbers, buyCurrency ,sellCurrency } from '../../apis/api.js'
export default {
  components: {
    Back
  },
  data() {
    return {
      id: 3,
      rate: 7.35,
      qty: 0,
      money: 0,
      isButtonNew: false,
      currency:[
        {
          id: 3,
          englishName:'BTC',
          name: "比特币",
        },
        {
          id: 7,
          englishName:'GT',
          name: "GT",
        },
        {
          id: 5,
          englishName:'ETH',
          name: "以太币",
        },
        {
          id: 8,
          englishName:'XRP',
          name: "XRP",
        }
      ]
    };
  },
  methods: {
    //输入金额返回数字货币数量
    getNumbers() {
      //console.log(this.money+" "+this.id)
      getNumbers(this.money, this.id).then(res => {
        console.log(res)
        if (res.data.code != 200) {
          this.$message.error("获取数据失败")
          return
        }
        this.qty = res.data.data
        this.isButtonNew=true
      }).catch(err => {
        this.$message.error("获取数据失败")
      })
    },
    //买入数字货币
    buyCurrency() {
      buyCurrency({id: this.id,quantity: this.qty}).then(res => {
        if (res.data.code != 200) {
          this.$message.error(res.data.message)
          return
        }
        //console.log(res)
        this.isButtonNew = true
        this.$message.success("购买成功")
        //清除本页面缓存
        this.qty=0;
        this.money=0;
        this.isButtonNew=false
      }).catch(err => {
        this.$message.error(err.message )
      })
    },
    //卖出数字货币
    sellCurrency() {
      sellCurrency({id: this.id,quantity: this.qty}).then(res => {
        if (res.data.code != 200) {
          this.$message.error(res.data.message)
          return
        }
        //、、console.log(res)
        this.isButtonNew = true
        this.$message.success("卖出成功")
        //清除本页面缓存
        this.qty=0;
        this.money=0;
        this.isButtonNew=false
      }).catch(err => {
        this.$message.error(err.message )
      })
    },
  }
};
</script>

<style scoped>
.all {
  width: auto;
  height: auto;
  display: flex;
}

.a {
  width: 480px;
  height: 500px;
}

.head1 {
  display: flex;
  margin-left: 20px;
}

.p1,
.p2,
.p3 {
  margin-left: 20px;
}

.p2,
.p3 {
  color: dimgrey;
  font-size: 10px;
  margin-left: 30px;
  margin-top: 3px;
}
.custom-tabs{
  width: 500px;
}
.el-tabs--border-card {
    border: 0;
}
.p4 {
  color: red;
  margin-left: 25px;
  font-size: 10px;
  margin-top: 15px;
}

.p5 {
  margin-left: 50px;
  font-size: 10px;
  margin-top: -15px;
}

.body {
  width: 480px;
  height: 500px;
  background-color: #F7F7F7;
}

.ustd {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
}

.ustd p {
  width: 50px;
  height: 40px;
  background-color: white;
  font-size: 10px;
  margin: 20px;
  color: dimgrey;
  border-radius: 8px;
  text-align: center;
}

.buy {
  width: 480px;
  height: 250px;
  background-color: white;
  margin-left: 10px;
  margin-top: -9px;
  border-radius: 8px;
}

.p6 {
  color: dimgrey;
  font-size: 10px;
  margin-left: 15px;
  padding-top: 15px;
}

input {
  border: 0px;
  opacity: 0.3;
  font-size: 14px;
  color: #101010;
  font-weight: 600;
  width: 450px;
  height: 25px;
  margin-left: 10px;
  border-radius: 6px;
  background-color: gainsboro;
}

.p7 {
  color: #CECCCF;
  font-size: 2px;
  margin-left: -25px;
}

button {
  border: 0px;
  opacity: 0.5;
  width: 450px;
  height: 25px;
  font-size: 10px;
  margin-left: 10px;
  border-radius: 6px;
  background-color: gainsboro;
  color: #B7B7B7;
  margin-top: 15px;
}

.newButton {
  border: 0px;
  opacity: 0.5;
  width: 450px;
  height: 25px;
  font-size: 10px;
  margin-left: 10px;
  border-radius: 6px;
  background-color: red;
  color: #B7B7B7;
  margin-top: 15px;
}

.ustd p:focus,
.head p:focus {
  color: #E73D3E;
  background-color: #FBEDEC;
}
</style>